<template>
	<div class="header">
		<router-link tag="div" :to="'/home/'+this.$store.state.username" class="header-left">
			<span class="iconfont" >&#xe731;</span>
		</router-link><!-- 存放的公共路径和数据 -->
		<div class="header-content"><p>{{this.$store.state.otherName}}<p class="min-word">手机在线-WiFi</p></p></div>
		<div class="header-right">
			<span class="iconfont jiahao">&#xeb9f;</span>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		name:"chatHeader",
	}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.style'
.header
	z-index: 99;
	height:1.1rem
	background:$bgColor
	width:100%
	text-align:center
	line-height:1.1rem
	color:#fff
	font-size:17px
	display:flex
	position: fixed
	top:0
	.header-left
		margin-left:.2rem
		width:10%
		.iconfont
			font-size:33px
		.touxiang
			width:100%
			border-radius:50%
	.header-content
		width:80%
		line-height: .4rem;
		padding-top:10px
		.min-word
			font-size:12px
			color:#c1f5ff
	.header-right
		margin-right:.3rem
		.jiahao
			font-size:22px
	.header-fixed
		position:fixed
		width:45%
		height:300px;
		background:#fff;
		color:#000;
		top:60px;
		right:10px;
		border-radius:10px;
		z-index:99
</style>